MorJS 添加頁面

頁面配置?

1. 在 src/pages 下創(chuàng)建文件夾 src/pages/edits-todo 用于存放編輯 Todo 功能相關(guān)的頁面
2. 在該文件夾下創(chuàng)建小程序頁面的四個基礎(chǔ)文件 edits-todo.wxml edits-todo.less edits-todo.ts edits-todo.json
3. 打開 edits-todo.json 文件進(jìn)行編譯，先寫一個 {} 作為空配置
4. 在頁面配置 src/app.json 中添加該頁面到 pages 中

{
  "pages": [
    "pages/todos/todos",
    "pages/add-todo/add-todo",
    "pages/edit-todo/edit-todo"
  ]
}

1. 關(guān)于 xml 文件，若項目初始化時選擇的是支付寶 DSL，頁面的基礎(chǔ)文件可改為 edits-todo.axml
2.  關(guān)于 css 文件，MorJS 支持 wxss/acss/less/scss 文件類型，開發(fā)者可選擇適合的文件格式進(jìn)行編寫

頁面功能?

1. 編輯入口：首頁 src/pages/todos 需要添加一下編輯的入口，修改一下首頁的樣式，js 中需要增加點(diǎn)擊跳轉(zhuǎn)方法，并把該項的 index 傳給頁面，用于標(biāo)記哪一項的內(nèi)容需要被編輯。

<!-- src/pages/todos/todos.wxml -->
<label wx:for="{{todos}}" wx:for-item="item" class="todo-item {{item.completed ? 'checked' : ''}}" wx:key="{{index}}">
  ...
  <view class="todo-item-edit" bindtap="editTodo" data-index="{{index}}">編輯</view>
</label>

// src/pages/todos/todos.ts
import { wPage } from '@morjs/core'

wPage({
  ...,
  editTodo(e) {
    my.navigateTo({url: `../edit-todo/edit-todo?index=${e.target.targetDataset.index}`})
  },
})

/* src/pages/todos/todos.less */
.todo-items {
  padding: 50rpx 30rpx;
}
.todo-item {
  display: flex;
  align-items: center;
}
.todo-item-text {
  width: 360rpx;
}
.todo-item-edit {
  margin: 0 20rpx;
}

2. 編輯功能：

• xml 文件中需要一個 input 用于顯示和修改被編輯項的內(nèi)容和一個按鈕用于觸發(fā)完成編輯
• css 文件編輯頁面樣式
• js 文件中，對頁面?zhèn)魅氲?index 對應(yīng)的內(nèi)容進(jìn)行保存，提供給 xml 中的 input 顯示，并添加一個方法用于按鈕點(diǎn)擊后觸發(fā)

<!-- src/pages/todos/edit-todos.wxml -->
<view class="page-edit-todo">
  <view class="edit-todo">
    <input class="edit-todo-input" placeholder="What needs to be done?" bindblur="onBlur" value="{{inputValue}}" />
  </view>
  <view class="todo-footer">
    <add-button text="Edit Todo" onClickMe="edit"></add-button>
  </view>
</view>

// src/pages/todos/edit-todos.ts
import { wPage } from '@morjs/core'

const app = getApp()

wPage({
  onLoad(query: any): void {
    this.setData({
      index: query.index,
      inputValue: app.todos[query.index].text
    })
  },

  data: {
    index: '',
    inputValue: ''
  },

  onBlur(e: any) {
    this.setData({
      inputValue: e.detail.value
    })
  },

  edit() {
    const { index, inputValue } = this.data
    app.todos[index].text = inputValue
    my.navigateBack()
  }
})

/* src/pages/todos/edit-todos.less */
.page-edit-todo {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.edit-todo {
  padding: 40px;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edit-todo-input {
  display: block;
  font-size: 50rpx;
  font-weight: 100;
  padding: 5px 5px;
  background: none;
  border: none;
  border-bottom: 1px solid #dfdfdf;
  color: #0effd6;
  width: 100%;
}

.todo-footer {
  padding: 50rpx 0 100rpx;
  font-size: 48rpx;
  font-weight: 200;
  text-align: center;
}

// src/pages/todos/edit-todos.json
{
  "usingComponents": {
    "add-button": "/components/add-button/add-button"
  }
}

3. 通過上述流程后，我們在 todo list 的每一項后面都會有一個「編輯」按鈕，點(diǎn)擊將會調(diào)轉(zhuǎn)到編輯頁，修改完內(nèi)容后點(diǎn)擊編輯頁下方的按鈕即可報錯并回到 todo list 頁，以上，恭喜你學(xué)會了怎么添加和編輯頁面代碼！?? ?? ??